<template>
  <div>
    <Row :gutter="26">
      <Col span="16">
        <Form autocomplete="off" label-position="top" ref="formInline" :model="formInline" :rules="ruleInline" inline>
          <Row :gutter="26">
            <Col span="8">
              <FormItem label="排控分店" prop="">
                <Select v-model="formInline.branch_store" clearable placeholder="排控分店">
                  <Option selected value="德州城市花园摄影">德州城市花园摄影</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="拍摄基地/景区" prop="">
                <Select v-model="formInline.shooting_base" clearable placeholder="拍摄基地/景区">
                  <Option value="德州城市花园摄影基地">德州城市花园摄影基地</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="拍摄模式" prop="">
                <Select v-model="formInline.shooting_mode" clearable placeholder="拍摄模式">
                  <Option value="一对一">一对一</Option>
                  <Option value="一对二">一对二</Option>
                  <Option value="一对三">一对三</Option>
                  <Option value="一对四">一对四</Option>
                  <Option value="一对五">一对五</Option>
                  <Option value="不占档">不占档</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="选择日期" prop="selectDate">
                <Select v-model="formInline.selectDate" clearable placeholder="选择日期">
                  <Option value="暂不排期">暂不排期</Option>
                  <Option :value="d.day" :date="d.day" v-for="(d,index) in datesList" :key="index">
                    <span>{{d.day}}</span>
                    <span style="color: rgb(153, 153, 153);">（22/28）</span>
                    <span style="color: rgb(153, 153, 153);">{{d.week}}</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="选择档期" prop="">
                <Select clearable placeholder="选择档期">
                  <Option v-for="item in dangqiData" :key="item.value" :value="item.value">{{item.label}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="摄影师模式">
                <i-switch size="large" v-model="formInline.sheyingshimoshi"></i-switch>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="26">
            <Col span="8">
              <FormItem label="选择摄影师" prop="">
                <Select v-model="formInline.photographer" clearable placeholder="选择摄影师">
                  <Option value="排空">排空</Option>
                  <Option :value="p.employee_name" :disabled="p.schedule_status === '今日已排控'" v-for="p in photographerList" :key="p.employee_id">
                    <span>{{p.employee_name}}</span>
                    <span style="color: rgb(153, 153, 153);">（{{p.schedule_status}}）</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="化妆师" prop="">
                <Select v-model="formInline.cosmetician" clearable placeholder="化妆师">
                  <Option value="排空">排空</Option>
                  <Option :value="p.employee_name" :disabled="p.schedule_status === '今日已排控'" v-for="p in cosmeticianList" :key="p.employee_id">
                    <span>{{p.employee_name}}</span>
                    <span style="color: rgb(153, 153, 153);">（{{p.schedule_status}}）</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="摄影师助理" prop="">
                <Select v-model="formInline.photographer_assistant" clearable placeholder="摄影师助理">
                  <Option value="排空">排空</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="化妆师助理" prop="">
                <Select v-model="formInline.cosmetician_assistant" clearable placeholder="化妆师助理">
                  <Option value="排空">排空</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="礼包券" prop="">
                <Select v-model="formInline.gift_voucher" clearable placeholder="剪辑师">
                  <Option value="排空">排空</Option>
                  <Option value="抖音券">
                    <span>抖音券</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                  <Option value="美团券">
                    <span>美团券</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="证件照" prop="">
                <Select v-model="formInline.ID_photo" clearable placeholder="证件照">
                  <Option value="排空">排空</Option>
                  <Option value="2">
                    <span>2</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                  <Option value="1">
                    <span>1</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                  <Option value="1">
                    <span>1</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="自驾" prop="">
                <Select v-model="formInline.self_driving" clearable placeholder="自驾">
                  <Option value="排空">排空</Option>
                  <Option value="2">
                    <span>2</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                  <Option value="1">
                    <span>1</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                  <Option value="1">
                    <span>1</span>
                    <span style="color: rgb(153, 153, 153);">（今日未排）</span>
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="客服" prop="">
                <Select v-model="formInline.customer_service" clearable placeholder="客服">
                  <Option value="排空">排空</Option>
                  <Option value="李闪">李闪</Option>
                  <Option value="张玲">张玲</Option>
                  <Option value="褚书梅">褚书梅</Option>
                  <Option value="董红">董红</Option>
                  <Option value="徐田">徐田</Option>
                  <Option value="陈雨燕">陈雨燕</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
              <FormItem label="礼服师" prop="">
                <Select v-model="formInline.dress_master" clearable placeholder="礼服师">
                  <Option value="排空">排空</Option>
                  <Option value="李闪">李闪</Option>
                  <Option value="张玲">张玲</Option>
                  <Option value="褚书梅">褚书梅</Option>
                  <Option value="董红">董红</Option>
                  <Option value="徐田">徐田</Option>
                  <Option value="陈雨燕">陈雨燕</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="26">
            <Col span="24">
              <FormItem label="备注（本流程的备注信息）" prop="">
                <Input v-model="formInline.beizhu"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Col>
      <Col span="8">
        <Card style="font-size: 12px;" dis-hover>
            <p slot="title" style="color: rgb(102, 102, 102);">
                <Icon type="md-list"></Icon>
                <span style="font-size: 12px;">订单相关信息</span>
            </p>
            <Row class="infoRow">
              <Col span="8">
                订单编号：
              </Col>
              <Col span="16">
                <span>{{orderRowData.order_no}}</span>
              </Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">
                客户信息：
              </Col>
              <Col span="16">
                {{orderRowData.customer_name}}
                <span>({{orderRowData.customer_phone}})</span>
              </Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">下单信息：</Col>
              <Col span="16">{{orderRowData.creation_time}} {{orderRowData.customer_service}}</Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">订单类型：</Col>
              <Col span="16">正常</Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">门市客服：</Col>
              <Col span="16">{{orderRowData.customer_service}} </Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">邀约转单：</Col>
              <Col span="16">邱星星 / </Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">套系名称：</Col>
              <Col span="16">{{orderRowData.series_name}}</Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">付款信息：</Col>
              <Col span="16" v-if="orderRowData.remaining_amount > 0">{{orderRowData.amount_paid}} / {{orderRowData.price}} <span style="background-color: rgb(249, 72, 23); color: rgb(255, 255, 255);">欠款</span></Col>
              <Col span="16" v-else>{{orderRowData.amount_paid}} / {{orderRowData.price}} <span style="background-color: rgb(7, 194, 95); color: rgb(255, 255, 255);">已付全款</span></Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">婚期信息：</Col>
              <Col span="16">{{orderRowData.wedding_date}}</Col>
            </Row>
            <Row class="infoRow" >
              <Col span="8">拍摄信息：</Col>
              <Col span="16">默认组 西子印象 2024-05-18 08:30 </Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">车辆信息：</Col>
              <Col span="16">{{orderRowData.add_car}}</Col>
            </Row>
            <Row class="infoRow">
              <Col span="8">订单备注：</Col>
              <Col span="16">{{orderRowData.remarks}}</Col>
            </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  import moment from 'moment';
  import { getEmployeeControlStatusApi } from '@/api/paikong/index.js'
  export default {
    data() {
      return {
        formInline: {
          branch_store: '德州城市花园摄影', // 分店
          shooting_base: '德州城市花园摄影基地', // 拍摄基地
          shooting_mode: '', // 拍摄模式
          selectDate: '2024-12-07',
          sheyingshimoshi: false,
          photographer: '', // 摄影师
          photographer_assistant: '排空', // 摄影师助理
          cosmetician: '', // 化妆师
          cosmetician_assistant: '排空', // 化妆师助理
          gift_voucher: '排空', // 礼包券
          ID_photo: '排空', // 证件照
          self_driving: '排空', // 自驾
          customer_service: '排空', // 客服
          dress_master: '排空', // 客服
          beizhu: '',

        },
        photographerList: [],
        cosmeticianList: [],
        orderRowData: {},
        datesList: [],
        ruleInline: {
          selectDate: [{ required: true, message: '日期必填' }],
        },
        dangqiData: [
          {label: '06:00', value: '06:00'},
          {label: '06:15', value: '06:15'},
          {label: '06:30', value: '06:30'},
          {label: '06:45', value: '06:45'},
          {label: '07:00', value: '07:00'},
          {label: '07:15', value: '07:15'},
          {label: '07:30', value: '07:30'},
          {label: '07:45', value: '07:45'},
          {label: '08:00', value: '08:00'},
          {label: '08:15', value: '08:15'},
          {label: '08:30', value: '08:30'},
          {label: '08:45', value: '08:45'},
          {label: '09:00', value: '09:00'},
          {label: '09:15', value: '09:15'},
          {label: '09:30', value: '09:30'},
          {label: '09:45', value: '09:45'},
          {label: '10:00', value: '10:00'},
          {label: '10:15', value: '10:15'},
          {label: '10:30', value: '10:30'},
          {label: '10:45', value: '10:45'},
          {label: '11:00', value: '11:00'},
          {label: '11:15', value: '11:15'},
          {label: '11:30', value: '11:30'},
          {label: '11:45', value: '11:45'},
          {label: '12:00', value: '12:00'},
          {label: '12:15', value: '12:15'},
          {label: '12:30', value: '12:30'},
          {label: '12:45', value: '12:45'},
          {label: '13:00', value: '13:00'},
          {label: '13:15', value: '13:15'},
          {label: '13:30', value: '13:30'},
          {label: '13:45', value: '13:45'},
          {label: '14:00', value: '14:00'},
          {label: '14:15', value: '14:15'},
          {label: '14:30', value: '14:30'},
          {label: '14:45', value: '14:45'},
          {label: '15:00', value: '15:00'},
          {label: '15:15', value: '15:15'},
          {label: '15:30', value: '15:30'},
          {label: '15:45', value: '15:45'},
          {label: '16:00', value: '16:00'},
          {label: '16:15', value: '16:15'},
          {label: '16:30', value: '16:30'},
          {label: '16:45', value: '16:45'},
          {label: '17:00', value: '17:00'},
          {label: '17:15', value: '17:15'},
          {label: '17:30', value: '17:30'},
          {label: '17:45', value: '17:45'},
          {label: '18:00', value: '18:00'},
          {label: '18:15', value: '18:15'},
          {label: '18:30', value: '18:30'},
          {label: '18:45', value: '18:45'},
          {label: '19:00', value: '19:00'},
          {label: '19:15', value: '19:15'},
          {label: '19:30', value: '19:30'},
          {label: '19:45', value: '19:45'},
          {label: '20:00', value: '20:00'},
          {label: '20:15', value: '20:15'},
          {label: '20:30', value: '20:30'},
          {label: '20:45', value: '20:45'},
          {label: '21:00', value: '21:00'},
          {label: '21:15', value: '21:15'},
          {label: '21:30', value: '21:30'},
          {label: '21:45', value: '21:45'},
          {label: '22:00', value: '22:00'},
        ]
      }
    },
    watch: {
      '$store.state.layout.app.orderRowData'(newValue, oldValue) {
        this.orderRowData = newValue
        for (let key in this.orderRowData) {
          if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
            this.orderRowData[key] = ""
          }
        }
      }
    },
    mounted() {
      this.orderRowData = this.$store.state.layout.app.orderRowData
      for (let key in this.orderRowData) {
        if (this.orderRowData[key] == null || this.orderRowData[key] == "null") {
          this.orderRowData[key] = ""
        }
      }
      this.getAllDatesOfNextYear()
      this.getEmployeeControlStatus(13)
      this.getEmployeeControlStatus(15)
    },
    methods: {
      // 查询某一天摄影师、化妆师员工的排控状态
      getEmployeeControlStatus(position_id) {
        getEmployeeControlStatusApi({
          position_id: position_id,
          control_date: this.formInline.selectDate
        }).then(res => {
          console.log('查询某一天摄影师、化妆师员工的排控状态', res);
          if (res.rstpCode === '0000') {
            if (position_id == 13) {
              this.photographerList = res.data
            } else if (position_id == 15) {
              this.cosmeticianList = res.data
            }
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      getAllDatesOfNextYear() {
        // 中文周几数组
        const chineseWeekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

        // 获取当前日期
        let currentDate = moment();
        this.formInline.selectDate = currentDate.format('YYYY-MM-DD')
        // 循环一年（365天）
        for (let i = 0; i < 366; i++) {
            // 获取当前日期的周几
            let weekday = currentDate.format('d').toString(); // 获取星期几的数字表示
            let chineseWeekday = chineseWeekdays[weekday]; // 转换为中文星期几

            // 输出日期和星期几
            // console.log(currentDate.format('YYYY-MM-DD') + ' ' + chineseWeekday);
            this.datesList.push({
              day: currentDate.format('YYYY-MM-DD'),
              week: chineseWeekday
            })
            // 增加一天
            currentDate.add(1, 'days');
        }
      }
    }
  }
</script>

<style scoped>

</style>
